<template>
	<view>
		<!-- 产品搜索 -->
		<!-- head -->
		<view class="lfy_search_head">
			<u-icon @click="backSquare" class="back" name="arrow-left" size="25"></u-icon>
			<u-search v-model="inputs" shape="spuare" :showAction="false" :animation="true"></u-search>
			<span @click="searchGoods" class="search_btn">搜索</span>
		</view>
		<!-- 内容 -->
		<view class="lfy_goods_container">
			<view class="lfy_goods_box" v-for="item in goods" :key="item.id">
				<div class="goods_img_box">
					<img :src="item.goodsImg01" alt="" />
				</div>
				<div class="goods_info">
					<p class="name">{{item.name}}</p>
					<p class="goods_tags">
						<span class="price">
							<span class="symbol">¥</span>
							{{item.price}}
						</span>
						<span class="collect">已有2人收藏</span>
					</p>

					<div class="seller_info">
						<img class="seller_head_portrait" :src="item.headPortrait" alt="">
						<span class="fans_box">
							<p class="seller_name">{{item.sellerName}}</p>
							<span class="fans">粉丝:{{item.fans}}</span>
							<span>关注:{{item.follow}}</span>
						</span>
					</div>
				</div>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods: [],
				inputs: ''
			}
		},
		onLoad() {
			this.$api.lfygoods().then(res => {
				this.goods = res.data
			})
		},
		methods: {
			// 搜索
			searchGoods() {
				this.goods = this.goods.filter((item) => {
					return item.name.indexOf(this.inputs) > -1
				})
			},
			// 返回
			backSquare() {
				console.log()
				uni.navigateBack({
					url: '/pages/square/square'
				})
			},
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	// head
	.lfy_search_head {
		display: flex;
		justify-content: space-between;
		height: 80upx;
	}

	.back {
		width: 5%;
	}

	.search_btn {
		height: 80upx;
		line-height: 80upx;
		width: 10%;
		text-align: center;
		font-size: 30upx;
	}


	// 内容
	.lfy_goods_container {
		margin: 0 40upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

	}

	.lfy_goods_box {
		margin: 40upx 0 0;
		width: 47%;
		background-color: #fff;
		box-shadow: 0upx 10upx 40upx #edeaef;
		border-radius: 20upx;
	}

	.goods_info {
		padding: 15upx;
	}

	.name {
		color: #999;
		font-size: 25upx;
		height: 50upx;
		line-height: 50upx;
	}

	.goods_tags {
		height: 50upx;
		line-height: 50upx;
		display: flex;
		justify-content: space-between;
	}

	.goods_tags .price {
		color: #ff7098;
		font-size: 30upx;
	}

	.symbol {
		font-size: 20upx;
	}

	.collect {
		color: #999;
		font-size: 20upx;
	}

	.goods_img_box {
		height: 230upx;
		overflow: hidden;
	}

	.goods_img_box img {
		width: 100%;
	}

	.seller_info {
		display: flex;
		justify-content: flex-start;
		height: 50upx;
		border-top: 2upx solid #dddddd;
		padding-top: 20upx;
	}

	.seller_head_portrait {
		height: 50upx;
	}

	.seller_name {
		color: #666;
		font-size: 20upx;
	}

	.fans_box {
		color: #999;
		font-size: 18upx;
		margin: 0 0 0 20upx;
	}

	.fans_box .fans {
		margin-right: 20upx;
	}
</style>
